<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>服务器返回的结果</title>
	<style type="text/css">
	#res{width:200px;height:200px;border:solid 1px blue;}


	</style>
</head>
<body>
	<button id='but'>服务器返回的结果</button>

	<div id='res'></div>

	<script type="text/javascript">
	var but = document.getElementById('but');

	var res = document.getElementById('res');

	but.onclick = function()
	{
		var x = new XMLHttpRequest;

		x.onreadystatechange = function()
		{
			if(x.readyState == 4 && x.status == 200)
			{
				//普通字符串
				// console.log(x.responseText);

				//解析html文件
				//res.innerHTML = x.responseText;
				//res.textContent = x.responseText;

				//解析xml文件
				/*var xmlDoc=document.implementation.createDocument("","",null);
				xmlDoc.async=false;
				xmlDoc.load("5-1.xml");

				var str = xmlDoc.getElementsByTagName('name');
				var arr = [];
				for (var i = 0; i < str.length; i++) {
					
					arr.push(str[i].innerHTML);
				};

				res.innerHTML = arr;
				*/

				//索引数组  js数组
				 //console.log(x.responseText);
				//eval('var str = '+x.responseText);

				//console.log(str);

				//关联数组 js对象
				eval('var str = '+x.responseText);

				//var str = {"name":"shuaishuai","age":"20","height":"178cm"};

				console.log(str.name);
			}
		}

		x.open('GET','5.php',true);
		// x.open('GET','5-1.html',true);
		//x.open('GET','5-1.xml',true);

		x.send();
	}


	</script>
</body>
</html>